<template>
		<view class="page">
			<!-- 自定义头部 -->
			<BhTitle titleText="交易案例"></BhTitle>
			<view class="container">
				<view v-if="tips" class="msg  bh-row bh-justify-space-between">
					为保护交易双方隐私，隐私信息不可见
					<!-- @click="tips = false" -->
					<!-- <image class="redclose" src="../../static/images/redclose.png" mode="" ></image> -->
				</view>
			
				<view class="data-container" v-if="records.length>0">
					<view v-for="(data, index) in records" :key="index" >
						<view class="item-container">
							<view class="item-img-box">
								<image class="item-img" :src="data.facadePicture"></image>
								<view class="black">
									<image class="zhuan" src="../../static/images/zhuanlogo.png" mode=""></image>
								</view>
							</view>
							
							<view style="width: 380rpx;">
								<view class="item-title mb10 white-space1" style="width: 380rpx;">{{data.area}}{{data.industryName}}转让</view>
								<view class="item-address-area mb10 bh-row">
									<image src="../../static/images/address.png" mode="" class="address-img"></image>
									 <view class="white-space1 rendering"  style="width: 360rpx;">
									 	{{data.street}}•{{data.address}}
									 </view>
					
									<!-- <view class="lebal">{{data.able}}</view> -->
								</view>
								<view class="mb10" style="display: flex;flex-direction: row;">
									<view class="item-lebal f22" v-show="j<3" v-for="(lebalItem, j) in data.labelDtoList" :key="j">
										{{lebalItem.labelName}}
									</view>
								</view>
								
								<view class="item-price  bh-row">
									<view class="right-rent fw600 mr10 f24">租</view>
									<text class="f32 fw600 mr20" v-if="data.rent">{{getSimpleAmount(data.rent)}}</text>
									<text class="f32 fw600 mr20" v-else>面议</text>
									<view class="right-rent fw600 mr10 f24">转</view>
									<text class="f32 fw600" v-if="data.transferFee">{{getFixedUnit(data.transferFee)}}</text>
									<text class="f32 fw600" v-else>面议</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else style="margin-top: 20vh;">
					<bh-no-more></bh-no-more>
				</view>
				<view class="" style="height: 40rpx;"></view>
			</view>
			
		</view>

</template>

<script>
	import {
		Api
	} from '../../api/api'
	import { CustomDict } from '../../components/custom_views/custom_dict';
	import {
		Dict
	} from '../../components/custom_views/dict';
	import bhNoMore from '../../components/custom_views/bh-no-more.vue';
	export default {
		components: {
			bhNoMore,
		},
		mixins: [],
		data() {
			return {
				tips:true,
				selections: ['区域', '面积', '租金', '更多'],
				records: [],
				pageNum:1,
				pageSize:10,
				
			}
		},
		computed: {},
		methods: {
			getFixedUnit(item) {
			  return CustomDict.getSimpleRent(item)
			  // let fixed= components_custom_views_custom_dict.CustomDict.getSimpleRent(this.postDto.transferFee)
			  // return fixed
			},
			initApiData() {
				let that = this
				// Api.PostSellApi.list(查询条件)   根据条件筛选。
				let pageNum = this.pageNum
				let pageSize = this.pageSize
				Api.PostTransCaseApi.list(pageNum,pageSize,(res) => {
					
					if(res.data.records){
						//页面弄filters不生效 就这么循环加进去了
						for(var i=0;i<res.data.records.length;i++){
							res.data.records[i].industryName = CustomDict.getDictName(res.data.records[i].industryId, Dict.IndustryTypeEnum)
							res.data.records[i].facadePicture = res.data.records[i].facadePicture.split(',')[0]
						}
						this.records = [...this.records, ...res.data.records]
					}
				})
			},
			
		},
		watch: {},
		 onReachBottom(){
			 if(this.records.length<this.pageNum*this.pageSize){
				 return
			 }
			 this.pageNum ++ 
			 this.initApiData()
		 },

		// 页面周期函数--监听页面加载
		onLoad() { 
			this.initApiData()
		},
		// 页面周期函数--监听页面初次渲染完成
		onReady() { },
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() { },
		// 页面周期函数--监听页面隐藏
		onHide() { },
		// 页面周期函数--监听页面卸载
		onUnload() { },
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	}
</script>

<style scoped lang="scss">
	@import url(../../static/css/base.css);
	.page {
		min-height: 100vh;
		background-color: #F5F9FA;
	}
	
	.container {
		
		width: 100%;

		.address-img{
			width: 20rpx;
			height: 22rpx;
			margin-right: 10rpx;
		}
		.msg {
			font-size: 24rpx;
			color: #F87147;
			padding: 0 32rpx;
			background-color: rgba(248, 113, 71, 0.1);
			height: 72rpx;
			line-height: 72rpx;
		}
		.redclose{
			width: 21rpx;
			height: 21rpx;
		}
		.right-rent {
			width: 34rpx;
			height: 34rpx;
			text-align: center;
			border-radius: 4rpx;
			box-sizing: border-box;
			border: 1px solid #F87147;
			font-size: 20rpx;
			color: #F87147;
			font-weight: 600;
		}
	}


	.btn-select-lebal {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		background: #ECF0F1;

		.btn-select {
			margin-right: 10rpx;

		}
	}

	.address_down.png {
		width: 24rpx;
		height: 24rpx;
	}

	.filter-container {
		display: flex;
		justify-content: space-between;
		padding-right: 20rpx;
		padding-left: 20rpx;
		font-size: smaller;
		margin-top: 30rpx
	}

	.data-container {
		padding: 0 32rpx;
		
		.item-container {
			display: flex;
			background: white;
			border-radius: 8rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;
			padding: 32rpx;
		}
		.item-img-box{
			width: 220rpx;
			height: 192rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			position: relative;
			.black{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				border-radius: 8rpx;
				background-color: rgba(0,0,0,.5);
			}
			.zhuan{
				width: 96rpx;
				height: 92rpx;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}
		.item-img {
			width: 220rpx;
			height: 192rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
		}

		.item-title {
			font-size: 32rpx;
			font-weight: bolder;
		}

		.item-address-area {
			display: flex;
			font-size: 24rpx;

		}

		.item-lebal {
			padding: 8rpx 12rpx;
			font-size: 22rpx;
			font-weight: 600;
			background: #F5F6F6;
			margin-right: 10rpx;
			border-radius: 4rpx;
			color: #666;
		}

		.item-price {
			color: red;
		}
	}
</style>